<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
        .div{
            display: flex;
        }
        .fa-exclamation-circle{
            color:red
        }
        .fa-check{
            color:rgb(0, 255, 8)
        }
    </style>
</head>
<body>
    <div class="div">
        密码：<input type="password" class="input">
    </div>
    <script>
        var inputEle = document.querySelector('.input')
        var divEle = document.querySelector('.div')
        inputEle.onblur = function(){
            var length = this.value.length
            if(length>=6&&length<=16){
                var warningEle = document.querySelector('.warning')
                var ele = document.createElement('div')
                ele.innerHTML = "<i class='fa fa-check'></i>"
                ele.setAttribute('class','warning')
                divEle.appendChild(ele)
                if(warningEle){
                    warningEle.remove()
                }
            }else{
                var warningEle = document.querySelector('.warning')
                if(!warningEle){
                    var ele = document.createElement('div')
                    ele.innerHTML = "<i class='fa fa-exclamation-circle'>请输入6-16位密码!</i>"
                    ele.setAttribute('class','warning')
                    divEle.appendChild(ele)
                }
            }
        }
    </script>
</body>
</html>